import { useLayoutEffect, useRef, useState, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Table, Tag, Button, Dropdown, Menu, Space } from 'antd'
import { CaretDownOutlined } from '@ant-design/icons'
import CommonSearchResult from "./CommonSearchResult"
import { formatTime } from '../../utils/time'

export const RowAction = ({
  btns,
  rowData
}) => {
  return <Space>
    {
      btns.map((el, i) => {
        return <Fragment key={i}>
          {
            el.type === 'dropdown' ?
              <Dropdown
                size="small"
                placement="bottomRight"
                trigger={['click']}
                overlay={
                  <Menu>
                    {
                      el.menus.map(menu =>
                        <Menu.Item key={menu.text} onClick={() => {
                          menu.onClick(rowData)
                        }}>{menu.text}</Menu.Item>)
                    }
                  </Menu>
                }
              >
                <Button size="small">更多<CaretDownOutlined /></Button>
              </Dropdown> :
              <Button
                size="small"
                {...el.props}
                onClick={() => {
                  el.onClick(rowData)
                }}
              >{el.text}</Button>
          }

        </Fragment>
      })
    }
  </Space>
}

RowAction.propTypes = {
  btns: PropTypes.array.isRequired,
  rowData: PropTypes.object.isRequired
}

export const createColumn = {
  version(options) {
    return {
      key: options.dataIndex,
      width: 100,
      align: 'center',
      render: (text) => {
        return <Tag color="blue">v{text}</Tag>
      },
      ...options
    }
  },
  person(options) {
    return {
      key: options.dataIndex,
      width: 120,
      align: 'center',
      render: (person) => {
        return person ? person.fullName : <span style={{ color: '#999' }}>暂无</span>
      },
      ...options
    }
  },
  time(options) {
    return {
      key: options.dataIndex,
      dataIndex: options.dataIndex,
      width: 100,
      align: 'center',
      render: text => text && formatTime(text),
      ...options
    }
  },
  searchResult(options) {
    return {
      key: options.dataIndex,
      render: (text) => {
        return <CommonSearchResult
          text={text}
          searchWord={options.searchWord}
        ></CommonSearchResult>
      },
      ...options
    }
  },
  actions(options) {
    return {
      key: 'action',
      title: '操作',
      width: 160,
      align: 'center',
      render: (rowData) => {
        return <RowAction btns={options.btns} rowData={rowData}></RowAction>
      },
      ...options
    }
  }
}

const CommonTable = (props) => {
  const [tableVisible, setTableVisible] = useState(false)
  const [tableHeight, setTableHeight] = useState(300)
  const tableBox = useRef(null)

  const watchTableHeight = () => {
    setTableHeight(tableBox.current.offsetHeight - 96)
  }

  useLayoutEffect(() => {
    watchTableHeight();
    window.addEventListener('resize', watchTableHeight)
    setTableVisible(true)
    return () => {
      window.removeEventListener('resize', watchTableHeight)
    }
  }, [])

  return <div ref={tableBox} style={{ height: '100%' }}>
    {
      tableVisible && <Table
        rowKey="id"
        bordered
        size="small"
        pagination={{
          showSizeChanger: true,
          showTotal: (total) => `共计：${total}条`
        }}
        scroll={{
          y: tableHeight
        }}
        {...props}
      ></Table>
    }
  </div>
}

CommonTable.propTypes = {
  dataSource: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired
}

CommonTable.createColumn = createColumn

export default CommonTable